* {
  padding: 0;
  margin: 0;
  list-style: none;
}

.all {
  background-color: rgb(246, 246, 246);
  width: 100vw;
  height: 100vh;
  box-sizing: border-box;
  padding: 5px;
  display: flex;
  justify-content: center;
}

/* 头部样式 */
.container {
  width: 99.6%;
  height: 100%;
}

.header {
  width: 100%;
  display: flex;
  justify-content: space-between;
  height: 20%;
}

.header .item {
  width: 24.8%;
  background-color: #fff;

}

.header .item .title {
  height: 33%;
  border-bottom: 1px solid #eee;
  display: flex;
  font-size: 0.2rem;
  justify-content: center;
  align-items: center;
}

.header .item .bottom {
  display: flex;
  flex: 7;
  height: 66%;
  font-weight: bold;
}

.header .item .bottom .left {
  display: flex;
  border-right: 1px solid #eee;
  flex-grow: 4;
  justify-content: center;
  align-items: center;
  font-size: 0.4rem;
}

.header .item .bottom .right {
  display: flex;
  flex-grow: 3;
  justify-content: center;
  align-items: center;
}

.header .item .bottom .right img {
  width: 30%;
  height: 30%;
}

/* 中间样式 */

/* 中间左侧样式 */
.container>.middle {
  box-sizing: border-box;
  width: 100%;
  height: 39.2%;
  margin: 0.07rem 0;
  display: flex;
  justify-content: space-between;
}

.container>.middle div,
.container>.bottom div {
  width: 49.8%;
  background-color: #fff;
}

.container>.middle .left .title,
.container>.middle .right .title,
.container>.bottom .left .title,
.container>.bottom .right .title {
  font-size: 0.2rem;
  margin: 0.3rem 0 0 0.5rem;
  padding-left: 0.1rem;
  height: 9%;
  border-left: 0.15rem solid #dd4646;
  display: flex;
  align-items: center;
}

.container>.middle .right .title {
  border-left: 0.15rem solid #ff6700;
}

.container>.bottom .left .title {
  border-left: 0.15rem solid #207038;
}

.container>.bottom .right .title {
  border-left: 0.15rem solid #378fca;
}

.container>.middle .item-left {
  height: 80%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.container>.middle .item-left .allnav {
  height: 100%;
  width: 100%;
}

/* 中间右侧样式 */
.container>.middle .right .echart {
  width: 100%;
  height: 80%;
}

.container>.middle .right .echart .gun {
  width: 100%;
  margin-top: 0.2rem;
  display: flex;
  justify-content: space-around;
  box-shadow: 0.01rem 0.01rem 0.1rem #33333350 inset;
}

.container>.middle .right .echart .gun p {
  /*background: red;*/
  /*margin: 15px 10px 10px 10px;*/
  /*padding: 20px;*/
  width: 24%;
  font-size: 0.25rem;
  font-weight: 600;
  color: #61d2f7;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* 商品标题 */

.container>.middle .right .echart .fontInner {
  width: 100%;
  display: flex;
  justify-content: space-around;
  /* border-radius: 0.1rem; */
  padding: 0.07rem 0;
}
.container>.middle .right .echart li:nth-of-type(odd) .fontInner {
  background-color: #7c330210;
}
.container>.middle .right .echart li:nth-of-type(even) .fontInner {
  background-color: #72016910;
}


.container>.middle .right .echart ul li .fontInner:hover {
  background-color: #00000040;
  border-radius: 0.2rem; 
}

.container>.middle .right .echart #FontScroll {
  width: 100%;
  height: 2.7rem;
  overflow: hidden;
  /*float: left;*/
  margin-top: 0.01rem;
  /*margin: 0 5%;*/
  /*margin-left: 50px;*/

  /*background: gold;*/
}

/* .container>.middle .right .echart #FontScroll ul{
  height: 80%;
} */
.container>.middle .right .echart #FontScroll ul li {
  
  width: 100%;
  /* color: #ffffff; */
  /* background-color: #000; */
  text-align: center;
  /* line-height: 0.32rem; */
  /* overflow: hidden; */
  font-size: 0.25rem;

}

.container>.middle .right .echart #FontScroll ul li:nth-of-type(2) .clear{
  /* box-shadow: 0.1rem 0.01rem 0.5rem #55555555 inset;
  border-radius: 0.2rem; */
}


.container>.middle .right .echart .fontInner p {
  width: 1rem;
  color: #000;
  display: flex;
  justify-content: center;
  align-items: center;

}

.container>.middle .right .echart .fontInner p:nth-of-type(2) {
  display: block;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}


.container>.middle .right .echart .fontInner p b {
  width: 0.3rem;
  height: 0.3rem;
  border-radius: 0.03rem;
  color: #fff;
  line-height: 0.2rem;
  display: flex;
  justify-content: center;
  align-items: center;
}

.container>.middle .right .echart li:nth-of-type(odd) .fontInner p b {
  background-color: #00ffff60;
}

.container>.middle .right .echart li:nth-of-type(even) .fontInner p b {
  background-color: #3caa4b50;
}

/* 底部样式 */
/* 底部左侧 */
.container>.bottom .right .title {
  width: 30%;
}

.container>.bottom {
  box-sizing: border-box;
  width: 100%;
  height: 39%;
  display: flex;
  justify-content: space-between;
}

.container>.bottom .left {
  display: flex;
  flex-direction: column;
  justify-content: center;

}

.container>.bottom .left .allnav {
  width: 100%;
}

/* 底部右侧 */
.container>.bottom .right div {
  width: 100%;
}

.container>.bottom .right .bottom-b {
  height: 80%;
}

.container>.bottom .right .bottom-b .allnav {
  height: 100%;
}